<!--
 * @Author: 137 '1432417996@qq.com'
 * @Date: 2025-05-14 22:14:25
 * @LastEditors: 137 '1432417996@qq.com'
 * @LastEditTime: 2025-05-15 01:36:44
 * @FilePath: \starter-3\components\homepage\countryTime.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="country-content">
          <div v-for="(item, index) in countryList" :key="index" class="country-box">
            <div class="country-icon">
              <img :src="item.img" style="width: 100%;height: 100%" alt="">
            </div>
            <div class="country-text">{{ item.name }}</div>
            <div class="country-text">{{ item.days }}</div>
          </div>
        </div>
</template>

<script setup>

import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'
import 'dayjs/locale/zh-cn'
// 初始化 Day.js 插件
dayjs.extend(utc)
dayjs.extend(timezone)
dayjs.locale('zh-cn') // 设置中文本地化

import country1 from '@/assets/images/homepage/country1.png'; //
import country2 from '@/assets/images/homepage/country2.png'; //
import country3 from '@/assets/images/homepage/country3.png'; //
import country4 from '@/assets/images/homepage/country4.png'; //
import country5 from '@/assets/images/homepage/country5.png';

// 生命周期处理
let timerOne = null;
onMounted(() => {
  updateTime();
  timerOne = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  clearInterval(timerOne)
})

const countryList = ref([
  {
    name: '北京',
    img: country1,
    days: '',
    tz: 'Asia/Shanghai'
  }, {
    name: '美东',
    img: country2,
    days: '',
    tz: 'America/New_York'
  }, {
    name: '美西',
    img: country2,
    days: '',
    tz: 'America/Los_Angeles'
  }, {
    name: '英国',
    img: country3,
    days: '',
    tz: 'Europe/London'
  }, {
    name: '欧洲',
    img: country4,
    days: '',
    tz: 'Europe/Paris'
  }, {
    name: '日本',
    img: country5,
    days: '',
    tz: 'Asia/Tokyo'
  },
])


// 时间更新函数
const updateTime = () => {
  countryList.value.forEach(item => {
    item.days = dayjs()
      .tz(item.tz)
      .format('MM-DD HH:mm:ss')
  })
}

</script>

<style scoped>

</style>